#{extends 'simpleTemplate.html'/}
<script>
    $(function(){
        var chat_selector = $("#chat-menu");
        $("#main-div").after(chat_selector);
        chat_selector.show();
        $("#chat-username").text("${current.name}");
    });
    var toServSocket = new WebSocket("@@{chat.ChatWS.clientToServ(global.id)}");
    var fromServSocket = new WebSocket("@@{chat.ChatWS.servToClient(global.id)}");
</script>

<script src="@{'/public/js/chatws.js'}" type="text/javascript"></script>
<script>
    $(function() {
        $("#chat").addClass("active");
        console.log("ready index call");
        $("#send_button").bind("click", function(event) {
            sendMessage();
        });
        $("#send_button,#message_text").bind("keypress", function(event) {
            if (event.which == 13) {
                sendMessage();
            }
        });

    });
</script>
<div class="content">
    <div class="content-header">
        <h2>Chat Index page header</h2>
    </div>
    <div class="content-body">
            <h3>You have entered global as ${current.name}</h3>
                <div class="well" id="chat-msg-area">

                </div>
            <!--input part-->
            <div class="chat-input">

                <textarea class="input-block-level" placeholder="chat here..." id="message_text"></textarea>
                <input type="button" value="Send" class="btn btn-primary" id="send_button">
            </div>

    </div>
</div>

<div id="chat-menu" style="display: none" class="span2">
    #{chat /}
</div>